<template>
  <el-container class="container">
    <el-header class="heading" style="height: auto">参数设置</el-header>
    <el-container>
      <el-aside class="Stationbox" width="400px">
        <charge-set-car @setChargeCar="setChargeCarfn" />
      </el-aside>
      <el-container>
        <el-container>
          <el-aside class="lconbox" width="340px">
            <el-row style="line-height: 32px; padding-bottom: 12px">
              <el-col :span="8">当前设备</el-col>
              <el-col :span="14" style="overflow: hidden">
                {{ ChargeCardata.gtel }}&nbsp;&nbsp;{{ ChargeCardata.gls }}
              </el-col>
            </el-row>
            <el-row style="line-height: 32px">
              <el-col :span="8">电流安全值</el-col>
              <el-col :span="14">
                <el-input
                  v-model="gcdlanq"
                  placeholder="最小电流—最大电流"
                  size="small"
                />
              </el-col>
            </el-row>
            <el-row style="flex: 1; position: relative">
              <el-scrollbar
                style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
              >
                <el-row v-if="ChargeSetadd2data.gls" style="padding: 10px 0">
                  <el-col
                    v-for="i in parseInt(ChargeSetadd2data.gls)"
                    :key="i"
                    class="glsbox"
                    :span="12"
                  >
                    <span
                      class="gcdlspan"
                      :class="gcdlclassfn(ChargeSetadd2data['gcdl' + i])"
                    ></span>
                    {{ i }}路&nbsp;&nbsp;{{ ChargeSetadd2data['gcdl' + i] }}
                  </el-col>
                </el-row>
              </el-scrollbar>
            </el-row>
            <el-row style="line-height: 32px; padding-bottom: 12px">
              <el-col
                v-if="ChargeCardata.gtype == 62 || ChargeCardata.gtype == 20"
              >
                软件版本&nbsp;&nbsp;{{ ChargeCardata.deviceName }}
              </el-col>
              <template v-else>
                <el-col :span="12">
                  软件版本&nbsp;&nbsp;{{ ChargeCardata.rjbb }}
                </el-col>
                <el-col :span="12">
                  硬件版本&nbsp;&nbsp;{{ ChargeCardata.yjbb }}
                </el-col>
              </template>
            </el-row>
            <el-row style="line-height: 32px; padding-bottom: 12px">
              <el-col
                :span="14"
                style="display: flex; justify-content: space-around"
              >
                间隔
                <el-input
                  v-model="ChargeSetadddata.time"
                  placeholder=""
                  size="small"
                  style="width: 100px"
                />
                S
              </el-col>
              <el-col :span="2" />
              <el-col :span="8">
                <el-button
                  :loading="ChargeSetadd2loading"
                  size="small"
                  type="primary"
                  @click="ChargeSetadd2tapfn"
                >
                  启动自检
                </el-button>
              </el-col>
            </el-row>
          </el-aside>
          <el-main class="mainbox" style="position: relative">
            <el-scrollbar
              style="
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 20px;
              "
            >
              <chargesetadd-from
                ref="chargesetaddfrom"
                :chargecardata="ChargeCardata"
                :gtel="gtel"
                @ChargeSetadd="ChargeSetaddfromfn"
                @setChargeCardatafn="setChargeCardatafn"
              />
            </el-scrollbar>
          </el-main>
        </el-container>
        <el-footer class="footerbox" height="280px">
          <div style="text-align: right; padding-bottom: 20px">
            <el-button
              :loading="ChargeSetsxlogaing"
              type="primary"
              @click="ChargeSetsxfn"
            >
              刷新
            </el-button>
            <span style="padding: 0 10px">
              <span style="margin-right: 10px">每15秒刷新一次数据</span>
              <el-checkbox v-model="checked" @change="ChargeSetsx15fn" />
            </span>
          </div>
          <el-row class="ChargeSetbox">
            <el-col :span="4">桩号</el-col>
            <el-col :span="4">类型</el-col>
            <el-col :span="2">通道</el-col>
            <el-col :span="4">发送信息</el-col>
            <el-col :span="4">发送情况</el-col>
            <el-col :span="4">成功时间</el-col>
            <el-col :span="2" />
          </el-row>
          <div style="flex: 1; position: relative">
            <el-scrollbar
              style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
            >
              <el-row
                v-for="(item, index) in ChargeSet"
                :key="index"
                class="ChargeSetbox"
              >
                <el-col :span="4">{{ item.gtel }}</el-col>
                <el-col :span="4">{{ ChargeSetselectfn(item, 'lx') }}</el-col>
                <el-col :span="2">{{ item.td }}</el-col>
                <el-col :span="4">{{ item.ip }}</el-col>
                <el-col :span="4">
                  {{ item.bSend == '1' ? '已发送' : '未发送' }}
                </el-col>
                <el-col :span="4">{{ item.sjc }}</el-col>
                <el-col :span="2">
                  <span class="ChargeSetdelbtn" @click="ChargeSetdel(item.id)">
                    删除
                  </span>
                </el-col>
              </el-row>
            </el-scrollbar>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
  import ChargeSetCar from '../../components/ChargeSetCar/ChargeSetCarnew'
  import chargesetaddFrom from '../../components/ChargeSetCar/chargesetaddFrom'

  export default {
    name: 'ChargeSet',
    components: {
      ChargeSetCar,
      chargesetaddFrom,
    },
    data() {
      return {
        checked: false,
        ChargeSet: [],

        dqChargeCar: [],
        gtel: '',
        ChargeCardata: {},
        ChargeSetadddata: { time: 5 },
        ChargeSetadd2loading: false,
        ChargeSetadd2data: {},
        sxsetTimeoutfn: '',

        Chargeaddjson: [],
        gcdlanq: '',
        ChargeSetsxlogaing: false,
      }
    },
    watch: {
      ChargeCardata: function () {
        this.ChargeSetadd2data = this.$z.deepClone(this.ChargeCardata)
      },
    },
    methods: {
      gcdlclassfn: function (p = 0) {
        var dl = this.gcdlanq.split('-')
        for (var i = 0; i < dl.length; i++) {
          if (i == 0 && dl[0] != '') {
            if (p < dl[i]) {
              return 'gcdlspanno'
            }
          } else if (i == 1 && dl[1] != '') {
            if (p > dl[i]) {
              return 'gcdlspanno'
            }
          }
          if (i == dl.length - 1 && dl[0] != '') {
            return 'gcdlspanok'
          }
        }
        return ''
      },
      ChargeSetaddfromfn() {
        this.ChargeSetsxfn()
      },
      ChargeSetselectfn(item) {
        let option = this.Chargeaddjson.find((f) => {
          return f.value == item.lx
        })
        return option ? option.name : item.lx
      },
      ChargeSetsx15fn() {
        if (this.checked) {
          this.ChargeSetsxfn()
        } else {
          clearTimeout(this.sxsetTimeoutfn)
        }
      },
      async ChargeSetsxfn() {
        // :gtel="gtel"
        // :ChargeCardata="ChargeCardata"
        let gtel = await this.$refs.chargesetaddfrom.getgtelfn()
        if (gtel == '') {
          return
        }
        this.Chargeaddjson = this.$refs.chargesetaddfrom.getChargeaddjsonfn()
        console.log(this.Chargeaddjson)
        this.gtel = gtel
        gtel = gtel.split(';')
        this.ChargeSetsxlogaing = true
        let ChargeCar = await this.$z.$axios.post('/ChargeCar', {
          gtel: gtel[0],
        })
        // ChargeCar.data[0].rjbb=Math.ceil(Math.random()*10);
        ChargeCar = ChargeCar.data
        if (ChargeCar.length == 1) {
          this.dqChargeCar = ChargeCar
          // if (this.ChargeCardata.b_ask != ChargeCar[0].b_ask) {
          //
          // }
          this.ChargeCardata = ChargeCar[0]
        }
        let url = '/ChargeSet'
        if (this.ChargeCardata.gtype == 62 || this.ChargeCardata.gtype == 20) {
          url = '/ChargeSetYKC'
        }
        let ChargeSet = await this.$z.$axios.post(url, {
          gtel: gtel[0],
        })
        ChargeSet = ChargeSet.data
        this.ChargeSet = ChargeSet

        clearTimeout(this.sxsetTimeoutfn)
        if (this.checked) {
          this.sxsetTimeoutfn = setTimeout(() => {
            this.ChargeSetsxfn()
          }, 15000)
        }
        this.ChargeSetsxlogaing = false
      },
      setChargeCardatafn(ChargeCar, gtels) {
        this.ChargeCardata = ChargeCar
        this.gtel = gtels
      },
      async ChargeSetdel(id) {
        await this.$confirm(
          this.$z.$t('删除此数据, 是否继续?'),
          this.$z.$t('提示'),
          {
            confirmButtonText: this.$z.$t('确定'),
            cancelButtonText: this.$z.$t('取消'),
            type: 'warning',
          }
        )
        await this.$z.$axios.post('/ChargeSetdel', { id })
        this.ChargeSetsxfn()
      },
      setChargeCarfn(ChargeCar) {
        this.dqChargeCar = ChargeCar
        this.gtel = ''
        ChargeCar.forEach((e) => {
          this.gtel += e.gtel + ';'
        })
        this.ChargeCardata = ChargeCar.length == 0 ? {} : ChargeCar[0]
        if (ChargeCar.length == 1) {
          this.gtel = ChargeCar[0].gtel
        }
      },
      ChargeSetadd2tapfn() {
        if (!this.ChargeCardata.gtel) {
          return
        }
        let xttime = parseInt(this.ChargeSetadddata.time)

        if (isNaN(xttime)) {
          this.$message('间隔时间错误')
          return
        }
        this.ChargeSetadd2loading = true

        this.dlcxfn().then(() => {
          this.ChargeSetadd2loading = false
        })
      },
      dlcxfn(td = 1, callback) {
        let promise
        if (typeof callback !== 'function') {
          promise = new Promise((resolve, reject) => {
            callback = function (resolvedata, rejectdata) {
              if (resolvedata) {
                resolve(resolvedata)
              } else {
                reject(rejectdata)
              }
            }
          })
        }
        // let {url}=this.sbb_askfn( this.ChargeSetadd2data),
        let url =
          this.ChargeSetadd2data.b_ask == 1 ? '/ChargeAskadd' : '/ChargeSetadd'
        let data1 =
          this.ChargeSetadd2data.b_ask != 1
            ? { gtel: this.ChargeSetadd2data.gtel, lx: 1, xt: td }
            : {
                gtel: this.ChargeSetadd2data.gtel,
                lx: 1,
                td: td,
                xt: 0,
                cdsj: 1,
              }
        var data2 =
          this.ChargeSetadd2data.b_ask != 1
            ? {
                gtel: this.ChargeSetadd2data.gtel,
                lx: 2,
                xt: td,
              }
            : { gtel: this.ChargeSetadd2data.gtel, lx: 2, td: td }
        this.$z.$axios.post(url, data1).then(() => {
          setTimeout(() => {
            this.$z.$axios
              .post('/ChargeCar', { gtel: this.ChargeSetadd2data.gtel })
              .then((parChargeCar) => {
                let { data } = parChargeCar
                if (data.length == 1) {
                  this.ChargeSetadd2data['gcdl' + td] = data[0]['gcdl' + td]
                }
                this.$z.$axios.post(url, data2).then(() => {
                  if (td >= this.ChargeSetadd2data.gls) {
                    callback(true)
                  } else {
                    setTimeout(() => {
                      let rtd = td + 1
                      this.dlcxfn(rtd, callback)
                    }, 5000)
                  }
                })
              })
          }, this.ChargeSetadddata.time * 1000)
        })

        return promise
      },
      sbb_askfn(ChargeCar) {
        let r = ChargeCar
          ? ChargeCar.b_ask == 1
            ? {
                url: '/ChargeAskadd',
                json: this.ChargeAskaddjson,
                data: ChargeCar,
              }
            : {
                url: '/ChargeSetadd',
                json: this.ChargeSetaddjson,
                data: ChargeCar,
              }
          : {
              url: '/ChargeSetadd',
              json: this.ChargeSetaddjson,
              data: ChargeCar,
            }
        r = this.$z.deepClone(r)
        let sbxx = ChargeCar ? ChargeCar : {}
        r.json.forEach(function (e) {
          if (e.type == 'select') {
            e.options = e.options.filter(function (f) {
              if (f.if) {
                f.nozhi = f.nozhi ? f.nozhi : []
                f.zhi = f.zhi ? f.zhi : []
                sbxx[f.if] = sbxx[f.if] ? sbxx[f.if] : ''
                if (f.nozhi.indexOf(sbxx[f.if].toString()) >= 0) {
                  return false
                } else if (f.zhi.length == 0) {
                  return true
                }
                if (f.zhi.indexOf(sbxx[f.if].toString()) >= 0) {
                  return true
                } else if (f.nozhi.length != 0) {
                  return true
                } else {
                  return false
                }
              } else {
                return true
              }
            })
          }
        })
        return r
      },
    },
  }
</script>
<style lang="scss" scoped>
  .ChargeSetdelbtn {
    cursor: pointer;
    color: #f56c6c;
  }
  .container {
    width: 100vw;
    height: 100vh;
    color: #fff;
    font-size: 14px;

    .heading {
      padding: 10px 15px;
      height: auto;
    }
  }

  .Stationbox {
    margin: 0 10px 20px 20px;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    display: flex;
  }

  .lconbox {
    background: rgba(255, 255, 255, 0.1);
    margin: 0 10px 10px 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }

  .footerbox {
    background: rgba(255, 255, 255, 0.1);
    margin: 10px 20px 20px 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
  }

  .mainbox {
    background: rgba(255, 255, 255, 0.1);
    margin: 0 20px 10px 10px;
    padding: 10px;
  }

  .glsbox {
    line-height: 30px;
  }

  .gcdlspan {
    width: 10px;
    height: 10px;
    background: #eee;
    display: inline-block;
    float: left;
    border-radius: 50%;
    line-height: 30px;
    margin: 10px 6px;
    box-shadow: 0 0 6px #eee;
  }

  .gcdlspanok {
    background: #01ff00;
    box-shadow: 0 0 6px #01ff00;
  }

  .gcdlspanno {
    background: #f87a7d;
    box-shadow: 0 0 6px #f87a7d;
  }

  .ChargeSetbox {
    background: rgba(255, 255, 255, 0.1);
    line-height: 40px;
    padding: 0 20px;
  }
</style>
